<template>
    <el-dialog :model-value="visible" :title="$t('user.resetPwdDialogTitle')" width="500px" :before-close="cb=>cancelForm('userFormRef')">
        <el-form
            ref="userFormRef"
            :model="userForm"
            :rules="validateRules"
            @submit.enter.prevent
            label-width="100px"
        >
            <el-form-item :label="$t('user.newPassword')" prop="newPassword">
                <el-input v-model="userForm.newPassword"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
                <el-button @click="cancelForm('userFormRef')" >{{$t('data.button.cancel')}}</el-button>
                <el-button type="primary" :loading="isSaveing" @click="submitForm('userFormRef')">{{$t('data.button.confirm')}}</el-button>
            </template>
    </el-dialog>
</template>
<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        },
    },
    emits:['submit','close'],
    data(){
        return{
            userForm:{},
            isSaveing:false,
            validateRules:{
                newPassword:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                    {
                        validator(rule, value) {
                            let re =/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,30}$/;
                            return re.test(value);
                        },
                        message: '密码不符合规则（大小写+数字+特殊符号）',
                        trigger: 'blur',
                    }
                ],
            }
        }
    },
    mounted(){
        this.userForm={}
    },
    methods:{
        submitForm(userFormRef){
            this.$refs[userFormRef].validate(valid=>{
                if(valid){
                    this.$emit('submit',this.userForm.newPassword);
                }
            })
        },
        cancelForm(userFormRef){
            console.log('cancelForm',this.userForm)
            this.$refs[userFormRef].resetFields()
            this.$emit('close');
        }
    }
}
</script>